<script setup>
const emit = defineEmits(['update: modelValue'])
import { apiGlobalGetClassificationList } from './api'
const props = defineProps({
  modelValue: { type: Object },
  slotType: { type: String, default: '请选择', },
})

const selectValue = computed({
  get: () => {
    return props.modelValue
  },
  set: value => {
    emit('update:modelValue', value)
  }
})

const optionsList = ref([])

const initOptions = async () => {
  const res = await apiGlobalGetClassificationList()
  optionsList.value = res.data
}
const cascaderProps = ref({
  multiple: true,
  emitPath:false,
  value:"id",
  label:"name",
  children:"son"
})
const handleChange = (e) => {
  // console.log(e);
}
onMounted(() => {
  initOptions()
})

</script>

<template>
  <!-- 待优化  兼容业务 -->
  <el-cascader v-model="selectValue" :options="optionsList" :props="cascaderProps" @change="handleChange" v-if="slotType == 'cascader'" clearable/>

  <el-select v-model="selectValue" v-bind="$attrs" v-else>
    <el-option-group v-for="group in optionsList" :key="group.id" :label="group.name">
      <el-option v-for="item in group.son" :key="item.id" :label="item.en_name" :value="item.id" />
    </el-option-group>
  </el-select>
</template>

<style scoped lang="scss">
</style>